﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3-Animate</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- styles -->
    <link rel="stylesheet" href="../../css/global.css"/>
    <link rel="stylesheet" href="css/google-code-prettify.css"/>
    <link rel="stylesheet" href="css/style.css"/>

    <!--[if lt IE 9]>
    <script src="../../lib/js/html5.js"></script>
    <![endif]-->

    <!-- icons -->
    <link rel="icon" href="../../lib/image/favicon.ico"/>
    <link rel="shortcut icon" href="../../lib/image/favicon.ico"/>

</head>
<body>
<nav class="navbar">
    <div class="inner">
        <ul class="nav">
            <li class="active">
                <a href="./index.html">Home</a>
            </li>
            <li>
                <a href="./transform.html">Transform</a>
            </li>
            <li>
                <a href="./transition.html">Transition</a>
            </li>
            <li>
                <a href="./animation.html">Animation</a>
            </li>
            <!--<li>-->
                <!--<a href="events.html">Events</a>-->
            <!--</li>-->
            <!--<li>-->
            <!--<a href="./script/">Script</a>-->
            <!--</li>-->
        </ul>
        <a class="brand" href="../../">Nicole_Site</a>
    </div>
</nav>
<header class="overview">
    <div class="inner">
        <h1>CSS3 动画</h1>

        <p>Transform, Transition, Animation</p>

        <p class="ver">Version 1.0.0</p>
    </div>
</header>
<div class="banner"><div class="inner"></div> </div>
<div class="container">
    <div class="inner">
        <article class="preface">
            <header><h2>前言</h2></header>
            <div class="sect">
                <p>随着网络的发展，浏览器具有更强的渲染更高级代码的能力。</p>
                <p>本文着重介绍变形(transform)、转换(transition)和动画(animation)CSS3动画技术。</p>
            </div>
        </article>
        <article class="intro">
            <section class="span1">
                <header><h3>transform</h3></header>
                <div class="sect">实现了一些可用SVG实现的同样的功能，可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素而只需要一行CSS码代。</div>
                <a href="./transform.html">阅读详细>></a>
            </section>
            <section class="span1">
                <header><h3>transition</h3></header>
                <div class="sect">涉及到CSS属性的基本的转换。就是定义和移动一个元素从它的静止状态到它的hover或者激活状态，转换可以和变形同时使用以创建一些动画。</div>
                <a href="./transition.html">阅读详细>></a>
            </section>
            <section class="span1">
                <header><h3>animation</h3></header>
                <div class="sect">可以定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。相对于使用脚本实现的动画，其拥有更加高效的性能。</div>
                <a href="./animation.html">阅读详细>></a>
            </section>
        </article>
    </div>
</div>
<footer class="footer">
    <div class="inner">Copyright ©myspace-nicolesite.rhcloud.com All Rights Reserved.
        <a href="http://weibo.com/magicdemo">@Ning_Wong</a>
    </div>
</footer>

<!-- javascript -->
<script src="../../lib/js/jquery-1.9.0.min.js"></script>
<script src="js/google-code-prettify.js"></script>
<script>
    (function($){
        var detect=function () {
            var node = document.createElement('switch'),
                    Transition = ['webkitTransition', 'MozTransition', 'OTransition', 'transition'];
            for (var j in Transition) {
                if (node.style[Transition[j]] != undefined) {
                    return true
                }
            }
        }
        if(!detect()){
            $('.banner .inner').text('Sorry! Your browser can not support css3 animation very well.')
        }

    })(window.jQuery)
</script>
</body>
</html>